<!DOCTYPE>
<html>

<head>
    <meta charset="utf-8">
    <title>task8</title>
    <link rel="stylesheet" href="task8.css" />
    <style>
        #wrapper {
  display: flex;
  flex-direction: row;
  padding: 15px 10px;
  margin: 5px;
  border: 1px solid #000;
  background-color: #fff;
  height: 240px; 
}

.layer_1 {
  display: flex;
  flex-direction: row;
  padding: 15px 10px;
  margin: 5px;
  border: 1px solid #000;
  background-color: #fff;
  height: 200px; 
}

.layer_2 {
  display: flex;
  flex-direction: row;
  padding: 15px 10px;
  margin: 5px;
  border: 1px solid #000;
  background-color: #fff;
  height: 160px; 
}

.layer_3 {
  display: flex;
  flex-direction: row;
  padding: 15px 10px;
  margin: 5px;
  border: 1px solid #000;
  background-color: #fff;
  height: 120px;
}

#function-box {
  margin: 10px;
}

#control-box {
  margin: 10px;
}
    </style>
</head>

<body>
    <div id="wrapper">NBA总冠军
        <div class="layer_1">layer_1
            <div class="layer_2">layer_1_1
                <div class="layer_3">科比布莱恩特</div>
                <div class="layer_3">勒布朗詹姆斯</div>
                <div class="layer_3">斯蒂芬库里</div>
            </div>
            <div class="layer_2">animal
                <div class="layer_3">湖人</div>
                <div class="layer_3">热火</div>
                <div class="layer_3">勇士</div>
                <div class="layer_3">小牛</div>
            </div>
        </div>
        <div class="layer_1">a
            <div class="layer_2">b
                <div class="layer_3">奇才</div>
                <div class="layer_3">凯尔特人</div>
                <div class="layer_3">爵士</div>
            </div>
            <div class="layer_2">c
                <div class="layer_3">雷霆</div>
                <div class="layer_3">鹈鹕</div>
            </div>
        </div>
    </div>

    <div id="function-box">
        <input type="text" id="queryInput" size="20">
        <input type="button" id="queryButton" value="查询">
    </div>

<!-- 
    <div id="control-box">
        <input type="button" id="preorder" value="前序遍历">
        <input type="button" id="postorder" value="后序遍历">
    </div> -->

    <script>
        // 存放遍历出来的 DOM 树节点
var orderQueue = [];
var inAnimation = false;

//先序遍历查找
function preOrder(root) {
  orderQueue.push(root);
  for (var i = 0; i < root.childElementCount; i++)
  {
    if (root.children[i] != null)
      preOrder(root.children[i]);
  }
}

//后序遍历
function postOrder(root) {
  for (var i = 0; i < root.childElementCount; i++)
  {
    if (root.children[i] != null)
      postOrder(root.children[i]);
  }
  orderQueue.push(root);
}

//多叉树遍历的结果存放在 orderQueue 中，在这个队列中寻找 queryWord
function render(queryWord) {
  if (inAnimation) {
    alert('in animation');
    return;
  }

  inAnimation = true;
  var i = 0;
  orderQueue[i].style.backgroundColor = 'blue';
  var showRet = setInterval(function() {
    i++;
    if (i >= orderQueue.length) {
      clearInterval(showRet);
      orderQueue[orderQueue.length - 1].style.backgroundColor = '#fff';
      alert("未找到查询内容");
      inAnimation = false;
      return;
    }
    orderQueue[i - 1].style.backgroundColor = '#fff';
    orderQueue[i].style.backgroundColor = 'blue';

    //找到查询词
    if (orderQueue[i].childNodes[0].nodeValue.search(queryWord) != -1) {
      alert("找到查询内容");
      clearInterval(showRet);
      inAnimation = false;
      return;
    }

  }, 500);
}

function resetBackgroundColor() {
  for(var i = 0; i < orderQueue.length; i++)
  {
    orderQueue[i].style.backgroundColor = '#fff';
  }
}

function validateInput() {
  var input = document.getElementById('queryInput').value;
  if (input == "") {
    alert("输入为空");
    return 1;
  }
  return 0;
}

var rootNode = document.getElementById('wrapper');
window.onload = function() {
  document.getElementById('queryButton').onclick = function() {
    var input = document.getElementById('queryInput').value;
    // 将上次查询高亮消除
    resetBackgroundColor();

    // 验证输入是否合法
    if (validateInput())
      return;

    // 遍历多叉树
    preOrder(rootNode);
    
    render(input);
  }  
}
    </script>
</body>

</html>